<template>
    <div class="demo">
        <!-- <vue3-seamless-scroll :list="msglist" :hover="true" direction="left" class="scroll-wrap"> -->
        <div class="ui-wrap">
            <div v-for="(item, i) in msglist" :key="i" class="li-item"
                :style="{ backgroundImage: `url(${getAssetUrl(item.url)})` }">
                <img style="width: 82px;height: 82px;" :src="getAssetUrl(item.icon)" alt="">
                <div class="titleItem-left">
                    <div class="fs-24 fw-700 gradient-text"><span class="fs-16">¥</span>{{
                        formatCurrency(item.num)
                    }}
                    </div>
                    <div class="fs-14">{{ item.title }}</div>
                </div>
                <div class="titleItem-right">
                    <div class="flex">
                        <div class="fs-12">{{ item.numtwoformatCurrency ? formatCurrency(item.numTwo, '¥') :
                            item.numTwo
                            }}{{
                                item.numdw }}</div>
                        <img class="wh-16" v-if="item.showuporduwn && item.isdown" src="./assets/img/down.png" alt="">
                        <img class="wh-16" v-if="item.showuporduwn && item.isup" src="./assets/img/up.png" alt="">
                    </div>
                    <div class="fs-12">{{ item.titleTwo }}</div>
                </div>
            </div>
        </div>
        <!-- </vue3-seamless-scroll> -->
    </div>
</template>

<script setup lang="ts">
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { formatCurrency } from '../../../utils/utils'
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBiQuerySalesVolumeApi } from '../../../api/visualization/visualization'
const router = useRouter()
const route = useRoute()
import { number } from 'echarts'
const props = defineProps({
    msg: {
        type: Object,
        required: true,
    },
})
watch(() => props.msg, (New, Old) => {
    if (New) {
        console.log(New, 'title信息')
        msglist.value[0].num = New.thisDateQuotaPay
        msglist.value[1].num = New.thisDateQuotaPeriod
        msglist.value[2].num = New.thisDateQuotaWesure
        msglist.value[3].num = New.thisDateQuotaTyx
        msglist.value[4].num = New.thisDateQuotaEle
        msglist.value[0].numTwo = (((New.thisDateQuotaPay - New.compareDateDataPay) / New.compareDateDataPay) * 100).toFixed(2) as any
        msglist.value[1].numTwo = New.perInsureCount
        msglist.value[2].numTwo = New.wesureCount
        msglist.value[3].numTwo = New.tyxCount
        msglist.value[4].numTwo = New.compareDateDataEle
        if (New.thisDateQuotaPay > New.compareDateDataPay) {
            msglist.value[0].isdown = false
            msglist.value[0].isup = true
        } else if (New.thisDateQuotaPay < New.compareDateDataPay) {
            msglist.value[0].isdown = true
            msglist.value[0].isup = false
        } else {
            msglist.value[0].isdown = false
            msglist.value[0].isup = false
        }
    }
}, {
    immediate: true
})
const msglist = ref([
    {icon: 'icon-1', isdown: false, isup: false, numdw: '%', numtwoformatCurrency: false, numTwo: '', num: '', titleTwo: '环比', title: '发薪销售总额', showuporduwn: true, url: 'title-0' },
    {icon: 'icon-2', numdw: '人', numtwoformatCurrency: false, numTwo: '', num: '', titleTwo: '当前在保', title: '长期保保费', showuporduwn: false, url: 'title-0' },
    {icon: 'icon-3', numdw: '人', numtwoformatCurrency: false, numTwo: '', num: '', titleTwo: '月投保数', title: '日日保保费', showuporduwn: false, url: 'title-0' },
    {icon: 'icon-4', numdw: '人', numtwoformatCurrency: false, numTwo: '', num: '', titleTwo: '月投保数     ', title: '团意保保费', showuporduwn: false, url: 'title-0' },
    {icon: 'icon-5', numtwoformatCurrency: true, numTwo: '', num: '', titleTwo: '上阶段充值额', title: '电子签充值金额', showuporduwn: false, url: 'title-0' },
    // { numtwoformatCurrency: true, numTwo: '70150', num: '3958889', titleTwo: '上月销售额', title: '报白销售总额  ', showuporduwn: false, url: 'title-6' },
    // { numtwoformatCurrency: true, numTwo: '70150', num: '3958889', titleTwo: '上月销售额', title: '闪客销售总额', showuporduwn: false, url: 'title-7' },
    // { numtwoformatCurrency: true, numTwo: ' ', num: '3958889', titleTwo: '上月销售额', title: '税筹销售总额', showuporduwn: false, url: 'title-8' },
])

const getAssetUrl = (imgName: string) => {
    return new URL(`./assets/img/${imgName}.png`, import.meta.url).href
}


</script>

<style lang="scss" scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.scroll-wrap {
    height: 98px;
    width: 100%;
    overflow: hidden;
}

.ui-wrap {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: auto;
}

.li-item {
    padding: 0;
    margin-top: 0;
    margin-left: 20px;
    flex: 1;
    text-align: center;
    color: white;
    // flex-basis: 320px;
    flex-shrink: 0;
    height: 70px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30px;
    gap: 5px;
}

.scroll {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.wh-16 {
    width: 16px;
    height: 16px;
}

.titleItem-right {
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.titleItem-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gradient-text {
    background: linear-gradient(180deg, #FFFFFF 25%, #8DD8E9 57%, #00C3DF 72%);
    /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
    -webkit-background-clip: text;
    /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent;
    /*给文字设置成透明*/
}

::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.titleMsgBox {
    -ms-overflow-style: none;
    /* IE 10+ */
    width: 100%;
    box-sizing: border-box;
    height: 92px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.titleItem {
    color: white;
    padding-left: 90px;
    overflow: hidden;
    flex-basis: 320px;
    flex-shrink: 0;
    height: 92px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 25px;
    gap: 5px;
}

.fc-ffffff {
    color: #ffffff;
}

.fs-24 {
    font-size: 24px;
}

.fs-16 {
    font-size: 16px;
}

.fs-14 {
    font-size: 14px;
}

.fs-12 {
    font-size: 12px;
}

.fw-700 {
    font-weight: 700;
}
</style>